<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔鲜儿官网复现</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        /* 自定义样式，可根据需要调整 */
        body {
            font-family: 'Inter', sans-serif;
        }

        /* 导航栏悬停效果 */
        nav a:hover {
            background-color: #0056b3;
            transition: background-color 0.3s ease;
        }

        /* 按钮悬停效果 */
        button:hover {
            transform: scale(1.05);
            transition: transform 0.3s ease;
        }
    </style>
</head>

<body>
    <!-- 头部 -->  23215220108 黎柏成
    <header class="bg-white shadow-md">
        <div class="flex justify-end px-6 py-2 border-b border-gray-200">
            <a href="#" class="mr-6 text-gray-600 hover:text-blue-600">请先登录</a>
            <a href="#" class="mr-6 text-gray-600 hover:text-blue-600">免费注册</a>
            <a href="#" class="mr-6 text-gray-600 hover:text-blue-600">我的订单</a>
            <a href="#" class="mr-6 text-gray-600 hover:text-blue-600">会员中心</a>
            <a href="#" class="mr-6 text-gray-600 hover:text-blue-600">帮助中心</a>
            <a href="#" class="text-gray-600 hover:text-blue-600">在线客服</a>
        </div>
        <div class="flex justify-between items-center px-6 py-4">
            <img src="https://picsum.photos/150/50" alt="小兔鲜儿logo" class="h-12">
            <div class="flex items-center">
                <input type="text" placeholder="搜一搜"
                    class="px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:border-blue-500">
                <button
                    class="px-4 py-2 bg-blue-500 text-white rounded-r-md hover:bg-blue-600 focus:outline-none">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </button>
            </div>
        </div>
    </header>
    <!-- 导航栏 -->
    <nav class="bg-blue-500">
        <ul class="flex justify-around list-none m-0 p-0">
            <li class="flex-1 text-center">
                <a href="#" class="block py-3 text-white hover:bg-blue-600">首页</a>
            </li>
            <li class="flex-1 text-center">
                <a href="#" class="block py-3 text-white hover:bg-blue-600">生鲜</a>
            </li>
            <li class="flex-1 text-center">
                <a href="#" class="block py-3 text-white hover:bg-blue-600">美食</a>
            </li>
            <li class="flex-1 text-center">
                <a href="#" class="block py-3 text-white hover:bg-blue-600">餐厨</a>
            </li>
            <li class="flex-1 text-center">
                <a href="#" class="block py-3 text-white hover:bg-blue-600">电器</a>
            </li>
            <li class="flex-1 text-center">
                <a href="#" class="block py-3 text-white hover:bg-blue-600">居家</a>
            </li>
            <li class="flex-1 text-center">
                <a href="#" class="block py-3 text-white hover:bg-blue-600">服装</a>
            </li>
            <li class="flex-1 text-center">
                <a href="#" class="block py-3 text-white hover:bg-blue-600">洗护</a>
            </li>
            <li class="flex-1 text-center">
                <a href="#" class="block py-3 text-white hover:bg-blue-600">孕婴</a>
            </li>
        </ul>
    </nav>
    <!-- 主体内容 -->
    <main class="px-6 py-8">
        <h1 class="text-3xl font-bold mb-4">欢迎来到小兔鲜儿官网</h1>
        <p class="text-gray-600">这里有丰富的商品供您选择！</p>
        <!-- 商品展示区域示例 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
            <div class="bg-white p-6 rounded-md shadow-md">
                <img src="https://picsum.photos/200/200" alt="商品图片" class="w-full h-48 object-cover mb-4">
                <h2 class="text-xl font-bold mb-2">商品名称</h2>
                <p class="text-gray-600">商品描述信息</p>
                <button
                    class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none">
                    查看详情
                </button>
            </div>
            <div class="bg-white p-6 rounded-md shadow-md">
                <img src="https://picsum.photos/200/200" alt="商品图片" class="w-full h-48 object-cover mb-4">
                <h2 class="text-xl font-bold mb-2">商品名称</h2>
                <p class="text-gray-600">商品描述信息</p>
                <button
                    class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none">
                    查看详情
                </button>
            </div>
            <div class="bg-white p-6 rounded-md shadow-md">
                <img src="https://picsum.photos/200/200" alt="商品图片" class="w-full h-48 object-cover mb-4">
                <h2 class="text-xl font-bold mb-2">商品名称</h2>
                <p class="text-gray-600">商品描述信息</p>
                <button
                    class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none">
                    查看详情
                </button>
            </div>
        </div>
    </main>
    <!-- 底部 -->
    <footer class="bg-gray-800 text-white text-center py-6">
        <p>&copy; 2025 小兔鲜儿 版权所有</p>
    </footer>

    <script>
        // 搜索功能
        const searchInput = document.querySelector('input[type="text"]');
        const searchButton = document.querySelector('button.bg-blue-500');

        searchButton.addEventListener('click', function () {
            const keyword = searchInput.value;
            if (keyword) {
                alert('正在搜索：' + keyword);
            }
        });

        searchInput.addEventListener('keydown', function (event) {
            if (event.key === 'Enter') {
                const keyword = searchInput.value;
                if (keyword) {
                    alert('正在搜索：' + keyword);
                }
            }
        });

        // 导航栏交互效果
        const navItems = document.querySelectorAll('nav ul li a');
        navItems.forEach(function (item) {
            item.addEventListener('click', function (event) {
                event.preventDefault();
                const targetId = this.getAttribute('href').substring(1);
                const targetElement = document.getElementById(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop,
                        behavior:'smooth'
                    });
                }
            });
        });
    </script>
</body>

</html>    